{extend name="common:base"}
{block name="content"}
<fieldset class="layui-elem-field layui-field-title">
    <legend>{$title|default='用户管理'}</legend>
</fieldset>
<form action="" class="layui-form" method="post" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="mname" lay-verify="required|email" placeholder="请输入邮箱地址" autocomplete="on" class="layui-input" {notempty name="oldData.mname"} value="{$oldData.mname}" {/notempty}>
        </div>
    </div>
    {empty name="oldData"}
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="pass" placeholder="请填写6到12位密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
            <input type="password" name="cpassword" lay-verify="repass" placeholder="请输入确认密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    {/empty}
    <div class="layui-form-item">
        <label class="layui-form-label">超级管理员</label>
        <div class="layui-input-block">
            <input type="checkbox"{notempty name="oldData.is_super"}{if($oldData.is_super=='是')}checked=""{/if}{/notempty} name="is_super" lay-skin="switch" lay-text="是|否" value="1">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" {notempty name="oldData.status"}{if($oldData.status=='是')}checked=""{/if}{/notempty} name="status" lay-skin="switch" lay-filter="switchTest" lay-text="激活|未激活" value="1">
        </div>
    </div>
    <!--图片上传-->
    <div class="form-group">
        <label class="layui-form-label"></label>
        <!--特别备注这里面上传的字段为file-->
        <a class="layui-btn" id="image" style="float: left;"><i class="layui-icon">&#xe67c;</i>上传图片</a>
        <!--地址显示栏-->
        <div class="layui-input-block" style="margin-left: 220px;">
            <input type="text" name="image"  class="layui-input" style="position: absolute;left: 0;top: 0;" {notempty name="oldData.image"}value="{$oldData.image}"{/notempty} readOnly>
        </div>
        <!--图片预览地址-->
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <img style="margin-left: 130px;" id="img"{notempty name="oldData.image"}src="{$oldData.image}"{/notempty}>
        </div>
    </div>
    {:token()}
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

{/block}
{block name="extend_js"}
<script>
    layui.use(['form','upload','layer'], function() {
        var $=layui.jquery
            ,form = layui.form
            ,upload=layui.upload
            ,layer=layui.layer;
        //普通图片上传
        var uploadInst=upload.render({
            elem:'#image'
            ,url:'{:url("api/Open/imgUpload")}' //文件上传接口
            ,ext:'jpg|png|gif'
//            ,area:'200px'
            ,drag:true
            //载入前配置
            ,before:function(){
                loading=layer.load(2,{shade:[0.2,'#000']});
            }
            ,done:function(res){
                layer.close(loading);
                layer.msg(res.msg);
                console.log(res);
                //上传完成显示地址到input
                $('input[name=image]').val(res.path);
                $('#img').attr('src',res.path);
            }
            ,error:function(){
//                请求异常回调
            }
        });
        //定义自定义验证规则
        form.verify({
           pass:[/(.+){6,12}$/,'密码必须6到12位']
            ,repass:function(value){
               var pass=$("input[name='password']").val();
               if(value !=pass){
                   return '两次密码不一致';
               }
            }
        });

//        form.render();
    });
</script>
{/block}